<div class="feature-settings-wrapper">
  <div class="feature-title-row">
    <h2>{{ 'DESCRIPTIONS.SETTINGS.FEATURES.TITLE' | translate }}</h2>
    <a
      mat-icon-button
      href="https://zitadel.com/docs/apis/resources/feature_service_v2/feature-service"
      rel="noreferrer"
      target="_blank"
    >
      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </div>
  <p class="events-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.FEATURES.DESCRIPTION' | translate }}</p>

  <ng-template cnslHasRole [hasRole]="['iam.restrictions.write']">
    <button color="warn" (click)="resetFeatures()" mat-stroked-button data-e2e="reset-features-button">
      {{ 'SETTING.FEATURES.RESET' | translate }}
    </button>
  </ng-template>

  <cnsl-card *ngIf="toggleStates$ | async as toggleStates">
    <div class="features">
      <cnsl-feature-toggle
        *ngFor="let key of FEATURE_KEYS"
        [toggleStateKey]="key"
        [toggleState]="toggleStates[key]"
        (toggleChange)="saveFeature(key, $event)"
      ></cnsl-feature-toggle>
      <cnsl-login-v2-feature-toggle [toggleState]="toggleStates.loginV2" (toggleChanged)="saveFeature('loginV2', $event)" />
    </div>
  </cnsl-card>
</div>
